<template>
  <div class="home">
    <div style="width:10vw;">
      <el-form label-width="60px">
        <el-form-item label="名字：">
          <el-input
            v-model="name"
            type="text"
            placeholder="请输入名称"
            @input="val=>{setUserName(val)}"
            style="width:100%;"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <hr />
    <div>
      <button @click="scrollToNum++;setScrollTo(scrollToNum)">+</button>
      &nbsp;<span>{{userName}}记录的滚动位置：{{scrollTo}}</span>&nbsp;
      <button @click="scrollToNum--;setScrollTo(scrollToNum)">-</button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'vueVuexTest',
  data() {
    return {
      name: '',
      scrollToNum: 0
    };
  },
  computed: {
    ...mapGetters({
      userName: 'getUserName',
      scrollTo: 'getScrollTo'
    })
  },
  methods: {
    ...mapActions(['setScrollTo', 'setUserName'])
  }
};
</script>
